<template>
  <div class="home">
    <Header />
    
    <div class="content">
   
      <div class="card">
        <div class="titles">查询数据</div>      
        <div class="box">
          
          <div class="cont" >            
            <div class="ibox flex">
              <div class="txts">用户地址</div>
              <div class="rbox">
                <div class="num" ><input placeholder="" v-model="xzNums" class="input num"/></div>
                <div class="txt"></div>
                <img
                @click="xzNums=''"
            src="../assets/img/clear.png"
            alt=""
            srcset=""
            class="ico"
          /> 
              </div>
            </div>
          </div>      
        </div>
        <div class="buttom">       
          <van-button type="primary"
          :loading="loading"
          @click="toJoin"
          class="btn act">
         立即查询
          </van-button>
         
        </div>
      </div>
      <div class="card" v-if="sxshow">
        <div class="titles">查询结果</div>
        <div class="box">
          <div class="cont">
            <div class="ibox flex">
              <div class="txts"></div>
              <div class="rbox">
                <div class="num">{{xzNum}}</div>
              </div>
            </div>
          </div>         
          <div class="cont m10 nobox">
            <div class="left">用户等级</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{userInfo.userLevel||0}} 星</div>
              </div>
            </div>
          </div>
          <div class="cont m10 nobox">
            <div class="left">可领取收益</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ dexc(userInfo.canRecU) }} USDT</div>
              </div>
            </div>
          </div>
          <div class="cont m10 nobox">
            <div class="left">累计收益额</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ dexc(userInfo.recUd)  }} USDT</div>
              </div>
            </div>
          </div>   
          <div class="cont m10 nobox">
            <div class="left">可领取代币</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ dexc(userInfo.canRecT)  }} DAOFA</div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">累计领取代币</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ dexc(userInfo.recTd) }} DAOFA</div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">伞下有效用户</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ userInfo.invt||0 }} </div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">直推有效用户</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ userInfo.rect||'0'}} </div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">剩余奖励额度</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ dexc(userInfo.maxReward)  }} USDT</div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">是否有效用户</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ userInfo.use?'是':'否'  }} </div>
              </div>
            </div>
          </div> 
          <div class="cont m10 nobox">
            <div class="left">是否激活用户</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ userInfo.act?'是':'否' }} </div>
              </div>
            </div>
          </div> 
          
          <div class="cont m10 nobox">
            <div class="left">剩余奖励次数</div>
            <div class="right">
              <div class="sinput">
                <div class="txt">{{ userInfo.rewardCount||'0'}} </div>
              </div>
            </div>
          </div> 
          <div class="box">
        <div class="cont">
         <div class="ibox">
          <div class="txts">推荐人地址</div>
          <div class="rbox">
            <div class="txt">{{userInfo.referrer||''}}</div>
          </div>
         </div>
        </div>
      </div>   
        </div>
      </div>

      <div class="card"  v-if="false">      
        <div class="box">
        <div class="cont">
         <div class="ibox">
          <div class="txts">推荐人地址</div>
          <div class="rbox">
            <div class="txt">{{userInfo.referrer}}</div>
          </div>
         </div>
        </div>
      </div>  
        <div class="titles ">用户直推</div>
        <div class="box">
          <div class="list">
            <div class="item" v-for="(item,i) in ulist" :key="i"> 
              <div class="addr">{{item.userAddress |yingcang}}</div>
              <div class="right">
                <div class="txt">{{item.totalInvest>0?'有效用户':'无效用户'}}</div>
                <button
            type="button"
            class="fuzhi btn act"
            v-clipboard:copy="item.userAddress"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError"
          >
           复制地址
          </button>
              </div>
            </div>
            
          </div> 
          <div class="more" @click="getList" v-if="page>1">
            加载更多
          </div>       
        </div>
      
      </div>
      <div class="content"  v-if="false"> 
        <div class="title">用户订单</div>
      <van-tabs v-model="current" swipeable class="tab"
        ref="tabs"
         background="transparent" 
         color="#35dcf7" 
        line-height="2px"
        line-width="20px"
        @change="changer"
        title-active-color="#ffffff">
    <van-tab title="捐赠中" name='1' class="item">
    </van-tab>
    <van-tab title="已出局" name='2' class="item">
    </van-tab>
    </van-tabs>
      <div class="list" >
      <div  v-for="(item,i) in list" :key="i">
      <div class="card" v-if="current==item.status">
        <div class="top">
          <div class="leftc">
            NO.{{item.orderIndex}}</div>
          <div class="time">{{formatDate(item.createdAt)}} </div>      
        </div>
        <div class="cont">
          <div class="linex">
            <div class="txt">捐赠数量</div>
            <div class="num">{{dexc(item.amount)}} DAOFA</div>
          </div>   
           <div class="linex" >
            <div class="txt">收益节点</div>
            <div class="num">{{dexc(item.outAmount)}} DAOFA</div>
          </div>  
          <div class="linex" >
            <div class="txt">当前状态</div>
            <div class="num">{{current==1?'捐赠中':'已出局'}} </div>
          </div>  
                       
        </div>  
      </div>
      </div>
      </div>
    </div>

      <div class="buttoms">Copyright © 2025  DAOFA. All rights reserved.</div>

    </div>

    <van-popup v-model="showdd" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="sqtxt">提示</div>
        <div class="flsz">
          <div class="btn">合约升级中</div>
        </div>
      </div>
    </van-popup>

    <!-- 授权 -->
    <!-- <van-popup v-model="impower" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="sqtxt">{{ $t("m.sqinfo") }}</div>
        <div class="flsz">
          <div class="btn" @click="approve">
            {{ sqloading ? $t("m.sqload") : $t("m.sqbtn") }}
          </div>
        </div>
      </div>
    </van-popup> -->

    <!-- 授权 -->
    <van-popup v-model="impower" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="sqtxt">{{ $t("m.要使用您个人账户的功能，请使用钱包授权") }}</div>
        <div class="flsz">
          <van-button
            :loading="sqloading"
            type="primary"
            @click="approve"
            class="btn"
            :loading-text="$t('m.授权中')"
          >
            {{ $t("m.钱包授权") }}</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-popup v-model="shows" round :close-on-click-overlay="false">
      <div class="popup">
        <div class="top">
          <div class="title">{{ $t("m.登录到您的账户") }}</div>
        </div>
        <div class="txt">{{ $t("m.要使用您个人账户的功能，请点击链接钱包") }}</div>
        <div class="btns" @click="ethConnect">{{ $t("m.链接钱包") }}</div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import {
  connectTron,
  Sign,
  getUser,
  getUserInfos,
  getDirectReferralsPage,
  getOrders,
  getRankMappingDay,
  getWhiteList,
  getBlackList

} from "@/api/Public";
import Header from "../components/header.vue";
import Web3 from 'web3'
import Decimal from 'decimal.js';
export default {
  name: "Home",
  components: { Header },
  data() {
    return {
      nit: -1,
      sxshow: false,
      actions: [
        { text: 100 },
        { text: 200 },
        { text: 300, disabled: true },
        { text: 400, disabled: true },
        { text: 500, disabled: true },
      ],
      community:0,
      isWhite:"",
      isBlack:'',
      uinfo:"",
      price:0,
      bkdata: "",
      xzNum: "",
      xzNums:"",
      index:'',
      buyshows:false,
      pairs: "",
      value: 10,
      datas: "",
      syq: false,
      showdd: false,
      clmenuShows: false,
      bdshows: false,
      show: true,
      shows: false,
      impower: false,
      bsurl: "",
      nodelist: [],
      nodeshow: false,
      ldxnodeshow: false,
      scnodeshow: false,
      more: true,
      userWallet: "",
      yqmcode: "",
      totaljoin: 0,
      dayjoin: 0,
      joinamount: 0,
      myID: "",
      Winner: "",
      Pool: "",
      Time: "",
      buyaddress: "",
      myas: false,
      bang: true,
      acdite: false,
      sqloading: false,
      bdloading: false,
      tbloading: false,
      sdloading: false,
      wshows: false,
      loadings: false,
      Winners: [],
      num:"",
     Cion: "",
      wf: {
        bz: "0",
        sxf: 300,
        sl: "",
        num: 100,
      },
      userInfo: "",
      endTime: 0,
      bate: "",
      bates: "",
      showldx: false,
      ldxloading: false,
      showsc: false,
      ldxnum: 100,
      mobility: "",
      page: 1,
      size:100,
      ulist:[],
      loading: false,
      finished: false,
      refreshing: false,
      redaio: 3,
      type: 0,
      current: 0,
      lpshow: false,
      lqshow: false,
      lqshows: false,
      lqloading: false,
      lpdata: "",
      base: "",
      feebnb: 1,
      vshow: false,
      banner: [
        {
          thumb: require("../assets/img/banner.png"),
          thumb_en: require("../assets/img/banner.png"),
          thumb_ko: require("../assets/img/banner.png"),
          thumb_ja: require("../assets/img/banner.png"),
          thumb_xby: require("../assets/img/banner.png"),
        },
      ],
      // video:require('../assets/img/open.mp4'),
      video: "",
      codeWallet:
        "https://www.123.com?code=" + this.$store.getters.userWallet,
      lploading: false,
      list: [],
      i: 0,
      page: 1,
      time: "",
      pricetime: "",
      exshow: false,
      exshows: false,
      exloading: false,
      exmcode: "",
      values: 0,
      exnum: "",
      twAmount: "",
      sqNum: 0,
      sqNums: 0,
      sqUsdtNum: 0,
      sqArcNum: 0,
      lqNum: 0,
      lqType: 0,
      pool: 0,
      hoder: 0,
      mylp: "",
      energyPool: 0,
      energy: {},
      available: 0,
      myUsdt: 0,
      fgNum:0,
      hzNum:'',
      hzshow:false,
      hzloading:false,
      smhzNum:"",
      smhzAddres:"",
      smhzshow:false,
      dhshow:false,
      dhNum:"",
      dhNums:"",
      prices:"",
      current:1,

      
    };
  },
  filters: {
    Endtime(e) {
      var end_str = e.replace(/-/g, "/"); //一般得到的时间的格式都是：yyyy-MM-dd hh24:mi:ss，所以我就用了这个做例子，是/的格式，就不用replace了。
      var end_date = new Date(end_str) - new Date(); //将字符串转化为时间
      return end_date;
    },

    formatDate(e) {
      if (e == 0) {
        return "";
      } else {
        let date = new Date(e * 1000);
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        return `${Y}-${M}-${D} ${h}:${m}:${s}`;
      }
    },
    yingcang(val) {
      if (val) {
        let a = val.replace(/(\w{7})\w+(\w{4})/, "$1...$2");
        return a;
      } else {
        return "...";
      }
    },
    time(time) {
      if (time) {
        var reg = /^(\d{4})-(\d{1,2})-(\d{1,2})\s(\d{1,2})(:(\d{1,2})){2}$/;
        var end = time.match(reg).slice(1, 4).join("-");
        return end;
      }
    },
  },
  watch: {
    "$store.getters.userWallet": function (val) {
      this.pustadd(val);
    },
    "$store.getters.nlist": function (val) {
      //  //console.log(val.length);
      this.mapdata();
    },
    deep: true,
    immediate: true,
  },
  // beforeCreate(){
  //   this.ethConnect()
  // },
  beforeCreate() {
    var i = 0;
    var a = setInterval(() => {
      if (typeof window.ethereum !== "undefined") {
        connectTron().then((info) => {
          clearInterval(a);
          if (info[0] && info[0].indexOf("0x") == 0) {
            if (this.$store.getters.myFil != info[0]) {
              this.userWallet = info[0];
              this.$store.commit("userWallet", info[0]);
              //  let baseUrl=((window.location.href).split("/#/"))[0]
              //  if(baseUrl.indexOf('xxdd.AAAprotocol.com') !=-1){
                // this.cread(info[0])
              //  }else{
              //   this.impower=true
              //  }

              //

              // this.yanzheng(info[0])
            } else {
              this.userWallet = info[0];
              this.$store.commit("userWallet", info[0]);
              // this.cread(info[0]);
            }
            //
            //
          } else {
            // this.$notify("请使用HECO地址登录游戏");
          }
        });
      }
      if (i > 5) {
        this.$notify("钱包失联了！！");
        clearInterval(a);
      }
      //console.log(i);
      i++;
    }, 1000);
  },
  mounted() {
    // 监听页面刷新事件
    window.addEventListener("beforeunload", this.handleBeforeUnload);
    window.addEventListener("load", this.handlePageLoad);
  },
  beforeDestroy() {
    // 组件前移除事件监听
    window.removeEventListener("beforeunload", this.handleBeforeUnload);
    window.removeEventListener("load", this.handlePageLoad);
  },
  created() {
  },

  computed: {
    dqyy() {
      if (this.$store.getters.language) {
        return this.$store.getters.language;
      } else {
        return "en-US";
      }
    },
  },
  methods: {
   

    formatDate(e) {
      if (e == 0) {
        return "";
      } else {
        let date = new Date(e * 1000);
        let Y = date.getFullYear();
        let M = date.getMonth() + 1;
        let D = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (M < 10) {
          M = "0" + M;
        }
        if (D < 10) {
          D = "0" + D;
        }
        if (h < 10) {
          h = "0" + h;
        }
        if (m < 10) {
          m = "0" + m;
        }
        if (s < 10) {
          s = "0" + s;
        }
        return `${Y} ${M}/${D} ${h}:${m}:${s}`;
      }
    },


    getNew(){
      getRankMappingDay(this.userWallet).then(res=>{
        console.log(res);
      })
    },



   async toBuy(){
      if(this.xzNums<0){
        // this.$notify( this.$i18n.t("m.最小投入$100"))
        return}
        getUserProductCount(this.$store.getters.userWallet,this.index).then(async (res)=>{
          console.log(res,this.index);
          if(res){
        this.$notify(this.$i18n.t("m.该等级您已无法再次升级"));

          }else{
            if (this.myUsdt - this.xzNums >= 0) {
        this.loading = true;
        this.sqUsdtNum = this.xzNums;
        await this.toGetsq();
        this.buyshows = true;
      } else {
        this.$notify(this.$i18n.t("m.余额不足"));
      }
          }
        }) 
     
    },
  async  toBuyProduct(){
      if(this.index>=0){
        await this.toGetsq();
      if (this.xzNums <= 0) {
        return;
      }
      if (!this.userWallet) {
        return;
      }
      this.lqloading = true;
      if (this.sqUsdtNum - this.sqNum > 0) {
        let num = Math.ceil(this.sqUsdtNum);
        toApprove(this.userWallet, num).then((res) => {
          // //console.log(res);
          if (res) {
            this.sqNum = this.sqUsdtNum;
            this.toBuyProduct();
          } else {
            this.lqloading = false;
          }
        });
      } else {
        toBuyProduct(this.userWallet, this.index).then((res) => {
          //console.log(res);
          this.lqloading = false;
          if (res) {
            this.buyshows = false;
            this.loading = false;
            this.upUser();
            this.$notify({
              message: this.$i18n.t("m.升级成功"),
              type: "success",
            });
          } else {
            this.$notify({
              message: this.$i18n.t("m.升级失败"),
              type: "danger",
            });
          }
        });
      }
      }
    },
    toHz(){
          if(this.hzNum>0){
            if(this.hzNum-this.userInfo.walletAmount>0){return}
            this.hzloading=true
            toTransferRepay(this.userWallet,this.hzNum).then(res=>{
              this.hzloading=false  
              if(res){
                this.hzshow=false
                this.cread()
                this.$notify({
            // message: this.$i18n.t("m.lqsg"),
            message: this.$i18n.t("m.划转成功"),
            type: "success",
          });                     
              } else{
                this.$notify({
              message: this.$i18n.t("m.划转失败"),
              type: "danger",
            });
              }                      
            })
          }
    },
  async  getPrices(){
        this.$get({
          url: "v2/market/tickers/STARDOGE_USDT",
          data: {},
          callback: (res) => {
            this.$nextTick(function () {
              console.log(res);
              if(res.code==200){
                this.prices=res.data.rate
                sessionStorage.setItem('price',this.price)
              }
            });
          },
          
        }).catch(err => {
          setTimeout(() => {
            this.getPrices()
          }, 1000);          
        });
    },
    toDhShow(e){
      if(e>=0){
        this.dhshow=true
        this.dhNum=""
      }
    },
    toDh(){
          if(this.dhNum>0){
            if(this.dhNum-this.userInfo.walletAmount>0){
              this.$notify(this.$i18n.t("m.余额不足"));
              return}
            this.hzloading=true
            toExChange(this.userWallet,this.dhNum).then(res=>{
              this.hzloading=false  
              if(res){
                this.hzshow=false
                this.cread()
                this.$notify({
            // message: this.$i18n.t("m.lqsg"),
            message: this.$i18n.t("m.闪换成功"),
            type: "success",
          });                     
              } else{
                this.$notify({
              message: this.$i18n.t("m.闪换失败"),
              type: "danger",
            });
              }                      
            })
          }
    },
    tosmhzShow(){
      this.smhzshow=true
      getEnergy(this.$store.getters.userWallet).then((res) => {
        //console.log(res, "getEnergy");
        this.energy = Object.assign({}, res);
        this.energy.totalEnergy = (res.totalEnergy / 10 ** 18).toFixed(6);    
        this.smhzNum=""
      this.smhzAddres=""
    
      });
    
    },
    tosmHz(){
      if(!this.smhzAddres){return}
      if(this.smhzNum>0){
            if(this.smhzNum-this.energy.totalEnergy>0){return}
            this.hzloading=true
            toTransfertEnergy(this.userWallet,this.smhzAddres,this.smhzNum).then(res=>{
              this.hzloading=false  
              if(res){
                this.smhzshow=false
                this.toGetEnergy()
                this.$notify({
            message: this.$i18n.t("m.划转成功"),
            type: "success",
          });                     
              } else{
                this.$notify({
              message: this.$i18n.t("m.划转失败"),
              type: "danger",
            });
              }                      
            })
          }
    },
  //   dexc(val){
  //   return val?(val/10**18).toFixed(6):0
  // },
  dexc(val){
 if(val){
  let  ethereum = window.ethereum
 let web3s = new Web3(ethereum);
  let amount=  web3s.utils.fromWei(val +'', 'ether'); 
  // let num =val/Math.pow(10,18)
  return val?  Math.round(amount*1000000)/1000000:'0'
 }else{
  return 0
 }
 },
  
    toGetMyU() {
      getMyUsdt(this.userWallet).then((res) => {
        //console.log('bs------',res);
        this.myUsdt = res;
      });
    },
    toChange(i,val) {
      this.index=i+1
      this.xzNums=val
    },
    togetAvailableEnergy() {
      getAvailableEnergy(this.$store.getters.userWallet).then((res) => {
        console.log('available',this.available);
        this.available = res;
      });
    },
    toGetEnergy() {
      getEnergy(this.$store.getters.userWallet).then((res) => {
        //console.log(res, "getEnergy");
        this.energy = Object.assign({}, res);
        this.energy.totalEnergy = (res.totalEnergy / 10 ** 18).toFixed(6);    
        // this.energy.withdrawalEnergy = (
        //   res.withdrawalEnergy /
        //   10 ** 18
        // ).toFixed(6);
      });
    },
    toEnergyPool() {
      getEnergyPool().then((res) => {
        //console.log(res);
        this.energyPool = (res * 1).toFixed(6);
      });
    },

    togetMyDeedPool() {
      getMyDeedPool().then((res) => {
        this.pool = (res * 1).toFixed(6);
      });
    },
    toLqShow(num, t) {
      this.lqNum = num;
      this.lqType = t;
      this.lqshow = true;
    },
    handlePageLoad() {
      // 页面刷新后的逻辑
      //console.log("页面已经刷新");
      //  this.vshow=true
    },
    isVend() {
      this.vshow = false;
      if (
        this.userInfo.referrer == "0x0000000000000000000000000000000000000000"
      ) {
        this.bdshows = true;
      }
      sessionStorage.setItem("video", this.vshow);
    },
    onSelect(e) {
      this.xzNum = e.text;
      this.sxshow = false;
    },
    async toJoin() {
      if(this.xzNums){
        this.loading=true
        this.xzNum=this.xzNums
        getUser(this.xzNum).then((res) => {
          console.log(res,'userInfo');
          this.userInfo = Object.assign({}, res);        
          // this.getOrder(1);
          // this.getList()
          this.loading=false
          this.sxshow = true
        });
       
      //   getUserInfos(this.xzNum).then((res) => {
      //     this.uinfo=Object.assign({}, res);   
      //   })
      //   getRankMappingDay(this.xzNum).then(res=>{
      //   console.log(res,'getRankMappingDay');
      //     this.community=res.communityPerformance
      // })
      // getWhiteList(this.xzNum).then(res=>{
      //   console.log(res,'getWhiteList');
      //     this.isWhite=res
      // })
      // getBlackList(this.xzNum).then(res=>{
      //   console.log(res,'getBlackList');
      //     this.isBlack=res
      // })
      
      
      }else{
        this.$notify("请输入查询地址");
      }
    },
    getList(){
      if(this.xzNum){
        getDirectReferralsPage(this.xzNum,this.page,this.size).then(res=>{
        if(res){
          console.log(res,'directreferrals');
          if(this.page==1){this.ulist=[]}       
          let list=res.map(el=>{
            el=Object.assign({},el)
            return el
          })
          if(res.length==this.size){
            this.page++
          }else{
            this.finished = true;
          }
          this.ulist=this.ulist.concat(list)
        }
       
      })
    }
    },

    async getOrder(e) {
      this.list = await getOrders(this.xzNum,e).then((res) => {
        console.log('orderList',res);
        return res;
      });
    },
    async toYpay(){
      if(this.twAmount>0){
        this.loading=true
        toBookYuEOrder(this.userWallet, this.twAmount).then((res) => {
          this.loading = false;
          if (res) {
            this.upUser();
            this.$notify({
              message:this.$i18n.t("m.存入成功"),
              type: "success",
            });
          } else {
            this.$notify({
              message: this.$i18n.t("m.存入失败"),
              type: "danger",
            });
          }
        });
      }
    },
    async scSelects() {
      await this.toGetsq();
      if (this.xzNum <= 0) {
        return;
      }
      if (!this.userWallet) {
        return;
      }
      this.lqloading = true;
      if (this.sqUsdtNum - this.sqNum > 0) {
        let num = Math.ceil(this.sqUsdtNum);
        toApprove(this.userWallet, num).then((res) => {
          // //console.log(res);
          if (res) {
            this.sqNum = this.sqUsdtNum;
            this.scSelects();
          } else {
            this.lqloading = false;
          }
        });
      } else {
        toBookOrder(this.userWallet, this.xzNum).then((res) => {
          //console.log(res);
          this.lqloading = false;
          if (res) {
            this.lqshows = false;
            this.loading = false;
            this.upUser();
            this.$notify({
              message: this.$i18n.t("m.质押成功"),
              type: "success",
            });
          } else {
            this.$notify({
              message: this.$i18n.t("m.质押失败"),
              type: "danger",
            });
          }
        });
      }
    },
    toexchange() {
      this.exnum = "";
      this.exshow = true;
    },
    toWithdrawEnergy(){
      if(this.available>0){
      this.loadings=true
      getWithdrawEnergy(this.userWallet).then(res=>{
        this.loadings=false
        if(res){
          this.togetAvailableEnergy()
          this.toGetEnergy()
          this.$notify({
                  message: this.$i18n.t("m.领取成功"),
                  type: "success",
                });
        }
      })
    }
    },


    handleFiexdToolItem(e) {
      // this.$notify(this.$i18n.t("m.wxtszwkf"))
      // return
      this.$router.push({ path: e });
    },
  
    toimpower() {
      this.$notify(this.$i18n.t("m.wxtszwkf"));
      //  if(this.$store.getters.userWallet){
      //     this.impower=true
      //     }else{
      //       this.shows=true
      //     }
    },
    approve() {
      if (this.userWallet) {
        this.sqloading = true;
        Sign(this.userWallet).then((rs) => {
          this.sqloading = false;
          if (rs) {
            this.impower = false;
            this.$store.commit("myFil", this.userWallet);
            this.cread(this.userWallet);
            this.$store.commit("userWallet", this.userWallet);
          }
        });
      }
    },

  

    async scSelect() {
      if (this.lqNum <= 0) {
        return;
      }
      this.lqloading = true;
      if (this.lqType == 1) {
        toWithdrawalStatic(this.userWallet, this.lqNum).then((res) => {
          this.lqloading = false;
          if (res) {
            this.upUser();
            this.lqshow = false;
            this.$notify({
              message: this.$i18n.t("m.领取成功"),
              type: "success",
            });
          }
        });
      }
    },

    to(url) {
      window.open(url);
    },

    getLp() {
      this.mylp = sessionStorage.getItem("mylp")
        ? JSON.parse(sessionStorage.getItem("mylp"))
        : "";
        getMyReward(this.userWallet).then((res) => {
        this.mylp = Object.assign({},res);
        this.mylp.dayRewardDrc=this.dexc(res.dayRewardDrc)
        this.mylp.dayRewardUsdt=this.dexc(res.dayRewardUsdt)
        this.mylp.totalRewardDrc=this.dexc(res.totalRewardDrc)
        this.mylp.totalRewardUsdt=this.dexc(res.totalRewardUsdt)
        sessionStorage.setItem("mylp", JSON.stringify(this.mylp));
      });
    },
    cread(val) {
      this.userWallet = this.$store.getters.userWallet || val;
      // //console.log(this.userWallet,'userWallet');
    
      if (this.userWallet) {      
        getUser(this.userWallet).then((res) => {
          // console.log(res,'userInfo');
          this.userInfo = Object.assign({}, res);
          this.userInfo.walletAmount = this.dexc(res.walletAmount);
          this.userInfo.receiveReward = this.dexc(res.receiveReward);
          this.userInfo.maxReward=this.dexc(res.maxReward)
         
          this.toGetMyU();
          this.getLp();
          // res.lastBookingTime
          if (this.vshow) {
            return;
          }
          // return
          if (res.referrer == "0x0000000000000000000000000000000000000000") {
            this.bdshows = true;
          }
        });
        // this.toGetEnergy()
      } else {
        this.shows = true;
      }
    },
    upUser() {
      getUser(this.userWallet).then((res) => {
        this.userInfo = Object.assign({}, res);
        this.userInfo.walletAmount = this.dexc(res.walletAmount);
          this.userInfo.receiveReward = this.dexc(res.receiveReward);
          this.userInfo.maxReward=this.dexc(res.maxReward)
      });
      this.toGetMyU();
      // this.getLp();
    },
   
    changer(e){
      this.current=e
      this.getOrder(e)
    },
    zwkf() {
      this.$notify(this.$i18n.t("m.zwkf"));
    },

    toPay() {
      var video = this.$refs.video;
      video.play();
    },

    toshowasd() {
      if (this.$store.getters.theame) {
        if (this.$store.getters.theame == 1) {
          this.acdite = true;
        } else {
          this.acdite = false;
        }
      } else {
        this.acdite = false;
      }
      //console.log(this.acdite);
      window.document.documentElement.setAttribute(
        "data-theme",
        this.acdite ? "dark" : "light"
      );
    },
    toggleTheme() {
      this.acdite = !this.acdite;
      window.document.documentElement.setAttribute(
        "data-theme",
        this.acdite ? "dark" : "light"
      );
      this.acdite
        ? this.$store.commit("theame", "1")
        : this.$store.commit("theame", "0");
    },
    tobding() {
      if (this.yqmcode) {
        if (this.bdloading) {
          this.$toast(this.$i18n.t("m.bdload"));
          return;
        } else {
          getCanBind(this.yqmcode).then((res) => {
            if (res) {
              this.bdloading = true;
              //console.log(this.yqmcode);
              // this.$toast(this.yqmcode);
              this.bangding(this.yqmcode);
            } else {
              // this.$toast(this.$i18n.t("m.dqzdbmz"));
              // this.$notify(this.$i18n.t("m.dqzdbmz"));
            }
          });
        }
      } else {
        this.$toast(this.$i18n.t("m.请输入推荐人钱包地址"));
      }
    },

    getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    onCopy() {
      this.$notify({
              message: this.$i18n.t("复制成功"),
              type: "success",
            });
    },
    onError() {
      this.$toast(this.$i18n.t("复制失败"));
    },
    //总投资
    async joinAmount() {
      this.joinamount = await window.ContractEth.methods.joinAmount().call();
    },

    ethConnect() {
      connectTron().then((info) => {
        if (info[0] && info[0].indexOf("0x") == 0) {
          this.shows = false;
          this.cread(info[0]);
          this.$store.commit("userWallet", info[0]);
        } else {
          // this.$toast(this.$i18n.t("m.qsydzdl"));
        }
      });
    },
    pustadd(info) {
      this.$store.commit("userWallet", info);
    },

    async bangding(code) {
      if (code) {
        if (code == this.userWallet) {
          return;
        }
        toBind(this.userWallet, code).then((res) => {
          this.bdloading = false;
          if (res) {
            this.$toast(this.$i18n.t("m.绑定成功"));
            this.bdshows = false;
          }
          //console.log(res);
        });
      } else {
        this.bdloading = false;
      }
    },
    jsdhNum(){
      setTimeout(() => {
        let num =new Decimal(this.dhNum)
        this.dhNums=this.$i18n.t("m.预计可得")+' $'+new Decimal(num.times(this.price)).toString()
      }, 100);
    },
    igbs() {
      this.show = false;
    },
    tosee() {
      this.more = !this.more;
    },

    goto(val, e) {
      clearInterval(this.time);
      if (e) {
        this.$router.push({ path: val, query: { ac: e } });
      } else {
        this.$router.push({ path: val });
      }
    },
 
    toFgjoin(){
      // this.$notify( this.$i18n.t("m.暂未开放"))
      // return
      if(this.fgNum-100<0){
        this.$notify( this.$i18n.t("m.最小投入$100"))
        return}
      this.loading=true
      if(this.fgNum>0){
        toRepayOrder(this.userWallet,this.fgNum).then(res=>{
          this.loading = false;
          if (res) {
            this.upUser();
            this.$notify({
              message: this.$i18n.t("m.质押成功"),
              type: "success",
            });
          }else{
            this.$notify({
              message: this.$i18n.t("m.质押失败"),
              type: "danger",
            });
          }
        })
      }
    },
    async toPage(val) {
      if (this.$store.getters.userWallet) {
        this.$router.push({ path: val });
      } else {
        this.shows = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../src/assets/scss/_handle.scss";

$t-mf: "PingFang";
$t-f: "DINAlternate-Bold";

.home {
  // background: #000000 url("../assets/img/b5.png") no-repeat fixed;
  background: #00030c;
  background-size: contain;
  background-position: center bottom;
  overflow-x: hidden;
  width: 750px;
  margin: 0 auto;
  min-height: 100vh;
 
  .mtop {
    margin: 140px 10px 0;
    padding: 10px 30px;
    color: #fff;

    border: 1px solid #35dcf7;
    .zctime {
      color: #fff;
      text-align: left;
      margin: 20px 0px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .price {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .txt {
        font-size: 26px;
        color: #ffffff;
        text-align: left;
        margin: 20px 0;
      }
      .num {
        font-size: 36px;
        color: #ffffff;
        margin-right: 10px;

        .dw {
          font-size: 32px;
          color: #ffffff;
          margin-right: 5px;
        }
      }
      .right {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        justify-content: space-between;
        .txt {
          font-size: 26px;
          color: #8d9399;
          text-align: left;
          margin: 20px 0;
        }
        .nums {
          font-size: 46px;
          font-family: $t-f;
          font-weight: bold;
          background: linear-gradient(
            100deg,
            #d5b275 0%,
            #e6d69a 31%,
            #d9ad2a 49%,
            #c5a26c 79%,
            #a58b00 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .address {
      margin: 28px;
      display: flex;
      align-items: center;
      font-size: 30px;
      font-family: $t-mf;
      font-weight: bold;
      color: #ffffff;
      line-height: 28px;
      .fuzhi {
        background: transparent;
        border: none;
      }
      .icon {
        width: 26px;
        height: 26px;
        margin-right: 16px;
      }
    }
    .close {
      position: absolute;
      right: 22px;
      top: 28px;
      img {
        height: 32px;
        width: 32px;
      }
    }
  }

  .sylist {
    display: flex;
    align-items: center;
    padding: 30px;
    justify-content: space-between;
    .boxl {
      background: linear-gradient(-18deg, #ffdf2d, #00e2be);
      // border-radius: 18px;
      height: 140px;
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }
    .boxr {
      background: rgba(38, 38, 38, 0.48); //#262626 ;
      // border-radius: 18px;
      height: 140px;
      width: 45%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }
    .stl {
      margin: 10px 30px;
      color: #ffffff;
      font-size: 22px;
    }
    .snum {
      margin: 10px 30px;
      color: #ffffff;
      font-size: 26px;
    }
    .flximg {
      position: absolute;
      right: 20px;
      width: 130px;
    }
  }

  .mdex {
    font-size: 24px;
    color: #fff;
    background: rgba(0 0 0 / 24%);
    margin: 0 0 20px;
    padding: 20px;
    border-top: 1px solid #6d6d6d;
  }
  .my-swipe {
    width: 694px;
    min-height: 360px;
    margin: 10px auto 0;
    .imgs {
      width: 100%;
      height: 100%;
      // border-radius: 20px;
    }
  }

  .band {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: relative;
    height: 199px;
    width: 199px;
    margin: 10px auto;
    animation: rotate 10s linear 0.1s infinite;
    img {
      height: 38px;
      width: 246px;
      margin: 64px auto;
    }
  }

  @keyframes rotate {
    0% {
      opacity: 1;
      transform: rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: rotate(360deg);
    }
  }
  .dark.band {
    // background-image: url("../assets/img/badns.png");
  }
  .content {
    background-size: 100% auto;
    background-position: bottom;
    margin-top: 18px;

    .actives {
      // padding: 56px 0;
      // background: #00000070;
      // border-radius: 20px;
      // background-size: cover;
      // border-radius: 30px;
      width: calc(100%);
      margin: 120px auto 0;
      .my-swipe1 {
        width: calc(100% - 20px);
        height: 100%;
        margin: 10px auto 0;
        // padding: 10px;
        .imgss {
          width: calc(100% - 42px);
          height: auto;
          //  border:2px solid #3bf7ff;
          border-radius: 16px;
          box-shadow: 0 1px 1px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 12%),
            0 4px 4px rgb(0 0 0 / 12%), 0 8px 8px rgb(0 0 0 / 12%),
            0 16px 16px rgb(0 0 0 / 12%);
        }
      }
      .notific {
        background: #2a2a2a;
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px;
        margin-top: -16px;
        z-index: 10;
        position: relative;
        .ico {
          width: 46px;
          height: 46px;
        }
        .txt {
          font-size: 26px;
          color: #ffffff;
          margin-left: 16px;
          margin-bottom: 5px;
        }
        .right {
          flex: 1;
          width: 100%;
          font-size: 28px !important;
        }
        .price{
          min-width: 0px;
          font-size: 26px;
          color: #ffffff;
          margin: 0 16px;
          text-align: left;
        }
      }
      .simg {
        width: 256px;
        height: 256px;
        margin: 20px auto 0;
        // border-radius: 10px;
      }
      .title {
        font-size: 30px;
        font-family: $t-mf;
        font-weight: 600;
        @include font_color("font_color2");
        line-height: 54px;
        padding: 30px 32px 12px;
      }
      .info {
        width: 600px;
        min-height: 52px;
        font-size: 24px;
        font-weight: 400;
        @include font_color("font_color2");
        line-height: 52px;
        margin: 12px auto 33px;
        text-align: left;
      }

      .btngrop {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .btn {
        width: calc(100% - 40px);
        height: 80px;
        background: #b4184c;
        box-shadow: 0px 4px 16px 4px rgba(62, 1, 162, 1);
        font-size: 32px;
        font-family: $t-mf;
        margin: 34px 20px;
        font-weight: 600;
        @include font_color("font_color3");
        line-height: 80px;
        text-align: center;
        border: 2px solid rgba(115, 40, 236, 0.5);
        font-weight: bold;
      }
      .act {
        background: #290e54;
        box-shadow: 0px 4px 16px 4px rgba(62, 1, 162, 1);
        border: 2px solid rgba(115, 40, 236, 0.5);
      }
    }
    .card {
      // width: 694px;
      // background: #252012d6 url("../assets/img/pbg.png") no-repeat;
      background: #00000070;
      // background: linear-gradient(270deg, #00dbde,  #35dcf7);
      background-size: contain;
      background-position: bottom;
      align-items: center;
      border: 3px solid #35dcf7;
      border-radius: 0;
      padding: 30px 40px;
      margin: 20px 30px 20px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      position: relative;
      .slgo{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 30px;
        width: 100%;
        border-bottom: 1px solid #35dcf7;
        .img{
          width: 88px;
          height: 88px;
        }
      }
      .iico{
        position: absolute;
        right: 40px;
        top: 30px;
        width: 46px;
        cursor: pointer;
      }
      .smico{
        position: absolute;
        right: 40px;
        top: 30px;
        width: 36px;
        cursor: pointer;
      }
      .titles {
        font-size: 28px;
        font-weight: 600;
        color: #ffffff;
        padding-bottom: 30px;
        width: 100%;
        border-bottom: 1px solid #35dcf7;
        .img2 {
          width: 100px;
        }
      }
      .tab{
            width: 100%;          
            .item{
                flex: 1;
                color: #ffffff;
                padding-bottom: 0px;
                font-size: 28px !important;
            }
            .act{
                border-bottom: 1px solid #35dcf7;
            }
        }
      .box {
        width: 100%;
        .list{
          .item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #35dcf7;
          padding: 12px;
          border-radius: 0;
          margin: 26px 0 20px;
            .addr{
              font-size: 24px;
           color: #ffffff;
            }
            .right{
              display: flex;
              align-items: center;
              flex-direction: row;
              .txt{
                font-size: 24px;
        font-family: $t-f;
          background: linear-gradient(100deg, #2de8e8 0, #35dcf7 49%, #00d0f3 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
              }
              .fuzhi{
                background: transparent;
              border: none;
              font-size: 24px;
              font-family: $t-mf;
              padding: 10px 20px;
              font-weight: 600;
              color: #FFFFFF;
              text-align: center;
              display: flex;
              margin-left: 10px;
              align-items: center;
              justify-content: center;
              text-shadow: -2px 7px 1px #000000;
              border-radius: 16px;
              background: linear-gradient(100deg, #2de8e8 0, #56cbdd 49%, #00d0f3 100%);
              }
            }
          }
        }
        .more{
          border: 1px solid #35dcf7;
          padding: 12px;
          border-radius: 0;
          font-size: 22px;
          color: #00d0f3;
          text-align: center;
          width: 100%;
    box-sizing: border-box;
    cursor: pointer;
        }
        .link {
          margin: 40px 26px 20px;
          font-size: 28px;
          white-space: normal;
          word-break: break-all;
          background: linear-gradient(
            100deg,
            #35dcf7 0,
            #35dcf7 49%,
            #35dcf7 100%
          );
          font-weight: bold;
          // background: linear-gradient(to right, #C373FA, #8DBFEF); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
          -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
          -webkit-text-fill-color: transparent; /*给文字设置成透明*/
        }
        .tips {
          font-size: 24px;
          color: #ababab;
          margin: 40px auto 10px;
        }

        .line {
          width: 100%;
          height: 1px;
          background: #353535;
          margin-top: 40px;
        }
        .m10 {
          margin: 20px 0;
        }
        .bord {
          border: 1px solid #35dcf7;
          padding: 12px;
          border-radius: 0;
        }
        
       .xzact{
          border: 1px solid #a9902e;
          padding: 16px ;
          box-shadow: 1px 5px 10px #000000;
          background: #00000070;
        }
        .cont {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            font-size: 24px;
            color: #ffffff;
            opacity: 0.6;
            white-space: nowrap;
          }
          .right {
            .sip {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 10px;
              flex-wrap: wrap;
              .num {
                border: 1px solid #E8C32D;
                cursor: pointer;
                color: #35dcf7;
                margin: 15px 10px;
                min-width: 25%;
                font-size: 26px;
                font-weight: 600;
                padding: 15px 10px;
                border-radius: 0;
              }
              .dex {
                color: #adb0b3;
                border: 1px solid #adb0b3;
              }
              .num:hover,
              .cact {
               background:linear-gradient(180deg, #FBDF62 0%, #b18d1f 100%);
                color: #ffffff;
              }
              .dex:hover {
                background: transparent;
                color: #adb0b3;
              }
            }
            .sinput {
              width: auto;
              padding: 5px 0px;
              border-radius: 0;
              // background: #181818;
              margin-bottom: 5px;
              display: flex;
              align-items: flex-end;
              justify-content: center;
              cursor: pointer;
              box-sizing: border-box;
              flex-direction: column;
              .txt {
                color: #ddd7d7;
                // margin-right: 16px;
                font-weight: bold;
                font-size: 26px;
               
              }
              .num {
                color: #ffffff;
                font-size: 32px;
                font-weight: bold;
                margin-right: 16px;
              }
            }
          }
          .input {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            font-size: 26px;
            font-weight: 600;
            // border-radius: 100px;
            height: 64px;
            padding: 8px 20px 8px 0px;
            box-sizing: border-box;
            color: #ffffff;
            border: none;
            border-bottom: 1px solid #35dcf7;
            min-width: 100px;
            text-align: left;
            .yinput {
              border: none;
              background: transparent;
              color: #ffffff;
              font-size: 28px;
              font-weight: bold;
            }
            .dw {
              display: flex;
              align-items: center;
              .tt {
                color: #ffffff;
                font-size: 28px;
                font-weight: bold;
                margin: 0 10px;
                white-space: nowrap;
              }
              .ico {
                width: 40px;
                height: 40px;
              }
            }
          }
          .icos {
            font-size: 18px;
            color: #ffffff;
            .ico {
              width: 40px;
              height: 40px;
              border: 1px solid #ffff;
              border-radius: 100%;
            }
          }
          .rbox {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            .num {
              //  margin: 22px auto;
              width: 100%;
              font-size: 24px;
              font-family: $t-f;
              font-weight: bold;
              background: linear-gradient(180deg, #FBDF62 0%, #b18d1f 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .txt {
              color: #ffffff;
              font-size: 20px;
              // font-weight: bold;
              margin: 0 10px;
            }
            .ico {
              width: 40px;
              height: 40px;
            }
          }
          .iitem{
            display: flex;
            align-items:center;
            justify-content: space-between;
            flex-direction: row;
            width: 100%;
            .tit{
              color: #ffffff;
              font-size: 24px;
              margin-top: 16px;
              // font-weight: bold;
              // margin: 0 10px;
            }
            .num{
              // margin-left: 16px;
            }
            .snum{
              margin-top: 16px;
              display: flex;
              align-items: center;
            }
          }
          .spr{
            justify-content: space-between;
            flex-direction: column;
          }

          .ibox {
            border: 1px solid #35dcf7;
            border-radius: 0;
            width: 100%;
            margin: 40px 0;
            padding: 30px 20px;
            box-sizing: border-box;
            position: relative;
            white-space: pre-wrap;
            white-space: normal;
word-break: break-all;
            background:linear-gradient(135.46deg, rgb(11 29 53) 24.8%, rgb(0 0 0 / 50%) 57.07%);
            // background:#00000070 url("../assets/img/sbg.png") no-repeat ;
            box-shadow: 0 2px 22px 0 #000000;
            .txts {
              color: #ffffff;
              font-size: 24px;
              margin-bottom: 20px;
              white-space: nowrap;
            }
            .btn {
          background: #2a2a2a;
          color: #ababab;
          border: none;
          border-radius: 0;
          height: 68px;
          width: 100%;
          font-size: 24px;
          font-weight: bold;
          margin-top: 26px;
        }
        .act {
          color: #ffffff;          
          box-shadow: inset 0px 4px 16px 4px #35dcf7;
          text-shadow: -2px 7px 8px #000000;
          background:linear-gradient(100deg, #2de8e8 0, #56cbdd 49%, #00d0f3 100%);
         }
          }
          
          .flex {
            display: flex;
            flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
            .txts{margin: 0;}
          }
          .btnr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .btn {
              background: #2a2a2a;
              color: #ababab;
              border: none;
              border-radius: 0;
              height: 68px;
              width: 250px;
              font-size: 24px;
              font-weight: bold;
              margin-left: 10px;
            }
            .act {
              color: #ffffff;
              text-shadow: -2px 7px 8px #000000;
              background: linear-gradient(180deg, #FBDF62 0%, #b18d1f 100%);
            }
          }
          .btngroup {
            display: flex;
            align-items: center;
            margin-top: 20px;
            .btns {
              box-shadow: inset 0px 4px 16px 4px #35dcf7;
              background: linear-gradient(
                100deg,
                #dcc179 0,
                #603711 49%,
                #d5b96f 100%
              );

              color: #ffffff;
              border-radius: 0;
              font-size: 28px;
              height: 52px;
              line-height: 52px;
              flex: 1;
              border: 1px solid #2a2a2a;
            }
            .btn {
              background: transparent;
              color: #ffffff;
              border-radius: 0;
              font-size: 28px;
              height: 52px;
              line-height: 52px;
              flex: 1;
              border: 1px solid #35dcf7;
              margin-left: 20px;
            }
          }
        }
        .cloew {
          flex-direction: column;
          .left {
            margin-bottom: 16px;
            width: 100%;
            font-size: 32px;
          }
          .right {
            width: 100%;
          }
        }
      }
      .buttom {
        display: flex;
        width: 100%;
        margin-top: 30px;
        .btn {
          background: #2a2a2a;
          color: #ababab;
          border: none;
          border-radius: 0;
          height: 68px;
          width: 100%;
          font-size: 24px;
          margin-right: 16px;
          font-weight: bold;
        }
        .act {
          color: #ffffff;          
          box-shadow: inset 0px 4px 16px 4px #35dcf7;
          text-shadow: -2px 7px 8px #000000;
          background:linear-gradient(100deg, #2de8e8 0, #56cbdd 49%, #00d0f3 100%);
          margin: 0;
        }
        .m5{
          margin: 0 5px;
        }
      }

      .imggrop {
        display: flex;
        align-items: center;
        justify-content: center;
        .im1 {
          width: 144px;
          height: 144px;
          z-index: 2;
        }
        .im2 {
          width: 144px;
          height: 144px;
          margin-left: -60px;
          z-index: 1;
        }
      }
      .ttx {
        font-size: 36px;
        font-family: $t-f;
        font-weight: 600;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
      }

      .sbot {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        flex: 1;
        width: 100%;
        text-align: center;
        margin: 24px 0;
        .txt {
          height: 56px;
          font-size: 46px;
          font-family: $t-mf;
          font-weight: 600;
          line-height: 54px;
          text-align: center;
          font-size: 56px;
          color: #ffffff;
        }
        .btn {
          background: #ffffff;
          font-size: 32px;
          font-family: $t-f;
          font-weight: 600;
          color: #000000;
          line-height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          width: 280px;
          height: 80px;
        }
      }
      .title {
        font-size: 36px;
        font-family: $t-f;
        font-weight: 600;
        color: #000000;
        line-height: 50px;
        text-align: left;
      }
      .lines {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        flex: 1;
        width: 92%;
        text-align: center;
        margin: 37px auto;
        .item {
          text-align: center;
          flex: 1;

          .txt1 {
            height: 54px;
            font-size: 28px;
            font-family: $t-f;
            font-weight: bold;
            line-height: 54px;
            text-align: center;
            color: #000000;
            white-space: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
          }
          .txt2 {
            height: 40px;
            font-size: 28px;
            font-family: $t-mf;
            font-weight: 600;
            color: #888888;
            line-height: 40px;
            text-align: center;
            margin-top: 18px;
          }
        }
      }
    }
    .nobox{
            padding: 0px 20px;
          }
    .title {
      font-size: 38px;
      font-weight: bold;
      color: #35dcf7;
      margin: 28px auto;
      border-radius: 0;
      min-width: 360px;
      // padding: 22px;
      padding-bottom: 16px;
      position: relative;
    }
    .title::after {
      content: "";
      position: absolute;
      height: 4px;
      width: 100px;
      border-radius: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(180deg, #35dcf7 0%, #35dcf7 100%);
    }

    .linebox {
      display: flex;
      align-items: center;
      justify-content: space-around;
      .card3 {
        flex: 1;
        margin: 10px 28px;
        background: #00000070; //#262626;
        // border-radius: 20px;
        border: 1px solid #35dcf7;
        // height: 360px;
        display: flex;
        align-items: center;
        justify-content: center;
        .list {
          flex: 1;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
          margin: 10px 0 10px;
          padding: 20px 0;
          position: relative;
          .she {
            position: absolute;
            right: 10px;
            top: 10px;
            height: 45px;
            width: 45px;
          }
          .item {
            flex: 1;
            overflow: hidden;
            .ico {
              width: 68px;
            }
            .num {
              margin-top: 22px;
              font-size: 32px;
              font-family: $t-f;
              font-weight: bold;
              background: linear-gradient(180deg, #FBDF62 0%, #b18d1f 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              line-height: 58px;
              white-space: nowrap;
              overflow-x: auto;
              padding: 0 20px;
              overflow-y: hidden;
            }
            .tt {
              font-size: 28px;
              font-family: $t-mf;
              font-weight: 600;
              color: #ffffff;
              line-height: 40px;
              margin-top: 12px;
            }
            .btn {
              min-width: 280px;
              background: #000;
              // border-radius: 60px;
              font-size: 32px;
              font-family: $t-mf;
              padding: 10px 20px;
              font-weight: 600;
              color: #ffffff;
              margin: 10px auto;
              text-align: center;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 10px;
              border: 1px solid #35dcf7;
              box-shadow: inset 0px 4px 16px 4px #35dcf7;
              background: linear-gradient(
                100deg,
                #dcc179 0,
                #603711 49%,
                #d5b96f 100%
              );

              .img {
                height: 32px;
                width: 32px;
                // border-radius: 100%;
                margin-right: 10px;
              }
              .line {
                height: 20px;
                width: 1px;
                background: #b4184c;
                margin: 0 20px;
              }
            }
          }
        }
        // .row{
        //   flex-direction: row;
        // }
      }
    }
    .card2 {
      width: 694px;
      height: 100%;
      background: #00000070; // #262626;
      // box-shadow: 0px 4px 16px 8px rgba(227, 224, 224, 0.5);
      // @include box_color("box_color");
      border: 1px solid #35dcf7;
      // border-radius: 20px;
      margin: 28px auto;
      padding: 28px 0;
      color: #000;

      .ico {
        width: 43px;
        height: 43px;
      }
      .imgroup {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-left: 48px;
        .img {
          width: 86px;
          height: auto;
          // border-radius: 10px;
        }
      }
      .mytg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 28px;
        .left {
          display: flex;
          align-items: center;
          .tt {
            margin: 0 10px;
          }
        }
        .right {
        }
      }

      .title {
        margin-left: 50px;
        margin-right: 28px;
        height: 66px;
        font-size: 40px;
        font-family: $t-mf;
        font-weight: 600;
        color: #ffffff;
        line-height: 66px;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: center;
        .node {
          font-size: 30px;
          font-weight: 600;
          color: #8b8b94;
          line-height: 32px;
        }
      }
      .lmtop {
        display: flex;
        justify-content: space-between;
        padding: 20px 32px;
        color: #000000;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .ilog {
            height: 56px;
            width: 56px;
          }
          .ttx {
            font-size: 24px;
            font-family: $t-f;
          }
        }
        .cont {
          height: 76px;
          width: 76px;
        }
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          .ilog {
            height: 56px;
            width: 56px;
          }
          .ttx {
            font-size: 24px;
            font-family: $t-f;
          }
        }
      }

      .sinput {
        border-top: 1px dashed #e9e9e9;
        border-bottom: 1px dashed #e9e9e9;
        display: flex;
        height: 100px;
        justify-content: space-between;
        align-items: center;
        padding: 10px 32px;
        .left {
          width: 50%;
          input {
            border: none;
            text-align: left;
            font-family: $t-f;
            background: transparent;
          }
        }
        .right {
          width: 50%;
          input {
            border: none;
            text-align: right;
            font-family: $t-f;
            background: transparent;
          }
        }
      }
      .info {
        padding: 10px 32px;
        .tlt {
          font-size: 22px;
          margin: 20px 0;
        }
        .total {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
      .tips {
        display: flex;
        align-items: center;
        flex-direction: column;

        .cnum {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #999999;
          line-height: 40px;
        }
      }

      .cbox {
        margin: 30px;
        padding: 14px 20px;
        position: relative;
        background: #fff;
        box-shadow: inset 0 -2px 8px 0 rgb(51 1 138 / 8%);
        // border-radius: 15px;
        border: 1px solid;
        .tl {
          font-weight: 600;
          font-family: $t-mf;
          font-size: 26px;
          text-align: left;
          color: #333;
        }
        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: 600;
          font-size: 30px;
          font-family: $t-f;
          margin: 40px 10px;
          color: #00023d;
        }
      }

      .num {
        margin-top: 22px;
        font-size: 18px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(
          100deg,
          #d5b275 0%,
          #e6d69a 31%,
          #d9ad2a 49%,
          #c5a26c 79%,
          #a58b00 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        // line-height: 58px;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0 20px;
        overflow-y: hidden;
      }
      .tt {
        font-size: 22px;
        font-family: $t-mf;
        font-weight: 600;
        color: #ffffff;
        line-height: 40px;
        margin-top: 12px;
      }
      .gree {
        color: #14f714;
      }
      .red {
        color: #ec2832;
      }
      .sitm {
        background: #313131;
        // border-radius: 10px;
        padding: 10px 0 20px;
        margin: 5px;

        .num {
          overflow: hidden;
          white-space: pre-wrap;
          padding: 0 0 0 10px;
        }
      }
      .bottom {
        margin-top: 64px;
        .btn {
          width: 80%;
          height: 80px;
          // background: #b4184c;

          background: #a2a2a9;
          // box-shadow: 0px 4px 16px 4px rgba(207,182,247,1);
          // border-radius: 40px;
          font-size: 32px;
          font-family: $t-mf;
          font-weight: 600;
          color: #ffffff;
          line-height: 80px;
          margin: 20px auto;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
        }
        .stbn {
          font-size: 30px;
          font-family: $t-f;
          font-weight: 600;
          color: #8b8b94;
          margin: 10px auto;
          line-height: 34px;
        }
      }
      .list {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 24px 0;
        .item {
          // flex: 1;
          overflow: hidden;

          .btn {
            min-width: 100px;
            max-width: 160px;
            background: #000;
            // border-radius: 60px;
            font-size: 32px;
            font-family: $t-mf;
            padding: 10px;
            font-weight: 600;
            color: #ffffff;
            margin: 0 auto;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .img {
              height: 32px;
              width: 32px;
              // border-radius: 100%;
              margin-right: 10px;
            }
          }
        }
      }

      .jjc {
        line-height: 52px;
        display: flex;
        justify-content: center;
        span:nth-child(1) {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #888888;
        }
        span:nth-child(2) {
          font-size: 44px;
          font-family: $t-f;
          font-weight: bold;
          @include font_color("font_color1");
          margin: 0 52px 0 20px;
          max-width: 50%;
          overflow-x: auto;
          display: inline-block;
          overflow-y: hidden;
        }
        span:nth-child(3) {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #616161;
        }
      }
      .time {
        margin: 52px auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: 42px;
          width: 38px;
          margin-right: 12px;
        }
        div {
          font-size: 44px;
          font-family: $t-mf;
          font-weight: bold;
          @include font_color("font_color1");
          line-height: 52px;
        }
      }

      .txt {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 600;
        color: #616161;
        line-height: 40px;
      }

      .bltitle {
        height: 60px;
        @include background_color("background_color5");
        font-size: 32px;
        font-family: $t-mf;
        font-weight: 600;
        @include font_color("font_color1");
        line-height: 60px;
        margin-top: 69px;
      }
      .list {
        .listtop {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 40px;
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #616161;
          line-height: 40px;
          padding: 0 52px;
          margin: 25px auto;
          .sort {
            width: 56px;
          }
        }
        .items {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 52px;
          margin: 25px auto;
          .sord {
            font-size: 28px;
            font-family: $t-f;
            font-weight: bold;
            @include font_color("font_color1");
            line-height: 32px;
            width: 56px;
            text-align: center;
          }
          .address {
            span {
              height: 32px;
              font-size: 28px;
              font-family: $t-f;
              font-weight: bold;
              @include font_color("font_color1");
              line-height: 32px;
              margin: 0 13px;
            }
            .fuzhi {
              background: transparent;
              border: none;
              width: 30px;
            }
            img {
              height: 30px;
              width: 28px;
            }
          }
          .num {
            font-size: 28px;
            font-family: $t-f;
            font-weight: bold;
            @include font_color("font_color1");
            line-height: 32px;
          }
        }
      }
      .buttombtn {
        margin: 15px auto 60px;
        width: 152px;
        height: 54px;
        background: #f3f3f3;
        // border-radius: 27px;
        transform: all 0.3;
        span {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          color: #aaaaaa;
          line-height: 54px;
          margin: 0 10px;
        }
        img {
          width: 22px;
          height: 14px;
        }
        .sxz {
          transform: rotate(180deg);
        }
      }
    }
    .sbfg {
      //   border: 1px solid #35dcf7;
      // background: url("../assets/img/abg.png") 100%/100% no-repeat;
      box-shadow: inset 0px 4px 16px 4px #35dcf7;
      background: linear-gradient(180deg, #FBDF62 0%, #b18d1f 100%);

      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 150px;
      .btn {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 0 20px;
        min-width: 252px;
        height: 84px;
        line-height: 84px;
        //  background: linear-gradient(18deg, #ffdf2d, #00e2be);
        border: 1px solid #ffffff;
        // border-radius: 70px;
        padding-left: 20px;
        font-weight: 600;
        font-family: $t-mf;
        overflow: hidden;

        .she {
          height: 45px;
          width: 45px;
          margin: 0 30px;
        }
        .tnxt {
          color: #ffffff;
          font-family: $t-mf;
          white-space: nowrap;
          font-size: 36px;
        }
      }
    }
    .card4 {
      width: 652px;
      // background: linear-gradient(18deg, #ffdf2d, #00e2be);
      // border-radius: 20px;
      background: #00000070;
      padding: 20px;
      margin: 20px auto;
      border: 1px solid #35dcf7;
      .yqlink {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 18px;
        .ltxt {
          font-size: 30px;
          font-family: $t-mf;
          font-weight: 600;
          color: #ffffff;
          line-height: 42px;
        }
        .mylink {
          width: 440px;
          height: 60px;
          background: #f8f8f8;
          // border-radius: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 22px;
          .address {
            width: 250px;
            height: 32px;
            font-size: 22px;
            font-family: $t-mf;
            font-weight: 600;
            color: #000000;
            line-height: 32px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .fuzhi {
            background: transparent;
            border: none;
            width: 50px;
          }
          .icon {
            width: 42px;
            height: 42px;
          }
        }
      }
      .tips {
        font-size: 24px;
        font-family: $t-mf;
        font-weight: 400;
        color: #ffffff;
        line-height: 34px;
        text-align: left;
        margin: 22px 0 0;
      }
      .btns {
        width: 638px;
        height: 80px;
        background: #000000;
        // border-radius: 40px;
        font-size: 32px;
        font-family: $t-mf;
        font-weight: 600;
        color: #ffffff;
        line-height: 80px;
        margin: 18px auto 20px;
      }
    }
    .more {
      width: 750px;
      margin: 0 auto;
      .txts {
        height: 56px;
        font-size: 40px;
        font-family: $t-mf;
        font-weight: 600;
        color: #fff;
        line-height: 56px;
        margin: 54px auto;
      }
      .qblist {
        display: flex;
        flex-wrap: wrap;
        margin: 15px;
        .icons {
          width: calc(50% - 32px);
          background: #262626;
          // box-shadow: 0px 4px 16px 8px rgba(227,224,224,0.5);
          // border-radius: 7px;
          // border-radius: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          margin: 16px;
          img {
            width: 84px;
            height: 84px;
            padding: 16px;
          }
          span {
            height: 44px;
            font-size: 22px;
            font-family: $t-mf;
            font-weight: 600;
            color: #ffffff;
            line-height: 44px;
            cursor: pointer;
            flex: 1;
            text-align: left;
            margin-left: 10px;
          }
        }
      }
    }
    .buttoms {
      height: 28px;
      font-size: 24px;
      font-family: $t-f;
      font-weight: bold;
      color: #999999;
      line-height: 28px;
      margin: 80px auto 80px;
    }
  }
 .list{
        min-height: 50vh;
        .card{
           background: #00000070;
      background-size: contain;
      background-position: bottom;
          align-items: center;
          border: 1px solid #35dcf7;
      border-radius: 0;
      // min-height: 200px;
      padding: 30px 40px;
      margin: 30px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
          .top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .leftc{
                display: flex;
                align-items: center;
                color: #56cbdd;
              padding-right: 16px;
              font-weight: bold;
              }
              .ico{
                width: 56px;
                margin-right: 5px;
              }
            .time{
              font-size: 26px;
              color: #56cbdd;
              padding-right: 16px;
              font-weight: bold;
              display: flex;
              align-items: center;
              .img2{
                width: 56px;
                margin-right: 10px;
              }
            }
            .status{
              border-radius: 0;
              color:#ffffff;
              background: #2A2A2A;
              padding:10px 20px;
            }
          }
          .cont{
            width: 100%;
            background:linear-gradient(135.46deg, rgb(11 29 53) 24.8%, rgb(0 0 0 / 50%) 57.07%);
            border-radius: 0;
            margin: 16px;
            border: 1px solid #35dcf7;
            padding: 16px;
            box-sizing: border-box;
            .linex{
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              margin: 16px auto;
              .txt{
                font-size: 26px;
                color: #ffffff;
              }
              .num{
                        font-size: 28px;
        font-family: $t-f;
        font-weight: bold;
          background: linear-gradient(100deg, #2de8e8 0, #35dcf7 49%, #00d0f3 100%);
          // box-shadow: 1px 1px 1px #000000;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    
        .dw{
          font-size: 22px;
          color: #12c2fc;
        }
              }
            }
            .box{
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
              border-radius: 0;
              // background: #2a2a2a;
              background: transparent;
              border: 1px solid #35dcf7;
              height: 120px;
              .stixl{
                font-size: 26px;
                color:#56cbdd;

              }
              .snum{
                 font-size: 32px;
                color:#56cbdd;
                margin-top: 16px;
              }
            }
          }

           .buttom{
        display: flex;
        width: 100%;   
        align-items: center; 
          justify-content: space-between; 
          padding-top: 12px;
        .btn{
         background: #2A2A2A;
          color: #56cbdd;
          border: none;
          border-radius: 0;
          height: 68px;
          width: 100%;
          font-size: 24px;       
        }
        .left{
          color: #ffffff;
          font-size: 26px;
          white-space: nowrap;
          margin-right: 16px;
          flex: 1;
          text-align: left;
        }
        .act{
          color: #ffffff;
            box-shadow: inset 0px 4px 16px 4px #35dcf7;
            background:linear-gradient(100deg, #2de8e8 0, #56cbdd 49%, #00d0f3 100%); }
      }
        }
       }
  .popup {
    width: 672px;
    background: #ffffff;
    // border-radius: 30px;
    padding: 30px 30px 40px;
    box-sizing: border-box;
    ::v-deep.van-list {
      height: 50vh;
      overflow: auto;
    }
    ::v-deep .van-stepper__input {
      font-size: 42px;
    }

    .tips {
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 600;
      color: #999999;
      line-height: 66px;
      margin: 24px auto;
    }
    .inode {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      background: #f1f1f1;
      // border-radius: 8px;
      margin: 8px 34px;
      padding: 20px 8px;
      font-weight: 400;
      font-size: 28px;
      font-family: $t-f;
      .items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .line {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px;
          flex: 1;
          .left {
            text-align: left;
            font-size: 22px;
            font-family: $t-mf;
            font-weight: 400;
            color: #999;
            line-height: 32px;
          }
          .right {
            font-size: 22px;
            font-family: $t-f;
            font-weight: 600;
            color: #131415;
            line-height: 32px;
          }
        }
      }
      .fuzhi {
        background: transparent;
        border: none;
        color: #1755ee;
      }
    }
    .input {
      border: none;
      width: 100%;
      height: 68px;
      background: #f8f8f8;
      // border-radius: 50px;
      margin: 10px auto;
      padding: 10px 20px;
      font-size: 28px;
      box-sizing: border-box;
      // background: transparent;
      border-radius: 16px;
    }
    .balance{
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 400;
      @include font_color("font_color1");
      line-height: 40px;
      text-align: right;
    }
    .tl{
      text-align: left;
      margin: 16px 20px;
    }
    .icon{
      width: 68px;
      margin: 16px auto;
    }
    .bg {
      background: linear-gradient(234deg, #e4005e, #b4184c);
      margin: 20px 34px;
      padding: 10px;

      // border-radius: 20px;
    }
    .logo {
      // height:188px;
      width: 188px;
      margin: 44px auto 20px;
    }
    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #262626;
      //  border-radius: 10px;
      padding: 0 10px;
      .txts {
        font-size: 32px;
        font-family: $t-f;
        text-align: right;
        margin: 10px 0;
        font-weight: bold;
        line-height: 54px;
        background: linear-gradient(234deg, #e4005e, #b4184c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .flexs {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 10px 0;

        .tts {
          font-size: 28px;
          font-family: $t-mf;
          font-weight: 600;
          @include font_color("font_color1");
          line-height: 40px;
          text-align: left;
          margin: 0 10px;
        }
      }
      .txd {
        margin: 20px 0;
        text-align: left;
        font-size: 24px;
        font-family: $t-f;
        font-weight: 600;
        color: #f8f8f8;
        line-height: 40px;
      }
      .inputs {
        border: none;
        height: 50px;
        width: 100%;
        font-size: 34px;
        font-family: $t-f;
      }
    }
    .txt {
      font-size: 28px;
      font-family: $t-mf;
      font-weight: 400;
      @include font_color("font_color1");
      line-height: 40px;
      margin: 10px 0;
      text-align: left;
    }
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
      .close {
        width: 28px;
      }
      .title {
        width: 100%;
        font-size: 32px;
        font-weight: bold;
        color: #000000;
        text-align: left;
      }
    }
    .sqtxts {
      font-size: 24px;
      font-family: $t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
      text-align: left;
    }
    .sqtxt {
      font-size: 32px;
      font-family: $t-f;
      font-weight: 600;
      color: #848484;
      line-height: 44px;
      margin: 10px 0 45px;
      padding: 0 22px;
      box-sizing: border-box;
    }
    .xbox {
      background: #f3f0f4;
      padding: 10px 20px;
      border-radius: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 16px auto;
      .num {
        //  margin: 22px auto;
        font-size: 24px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(34deg, #1fa391, #28514b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .txt {
        color: #2a2a2a;
        font-size: 24px;
        font-weight: bold;
        margin: 0 10px;
      }
    }
    .rbox {
      display: flex;
      align-items: center;
      justify-content: center;

      .num {
        //  margin: 22px auto;
        font-size: 42px;
        font-family: $t-f;
        font-weight: bold;
        background: linear-gradient(
          100deg,
          #d5b275 0%,
          #e6d69a 31%,
          #d9ad2a 49%,
          #c5a26c 79%,
          #a58b00 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .txt {
        color: #2a2a2a;
        font-size: 24px;
        font-weight: bold;
        margin: 0 10px;
      }
      .ico {
        width: 40px;
        height: 40px;
      }
    }
    .flsz {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .cnet {
      text-align: center;
      font-size: 46px;
    }
    .btn {
      width: calc(100% - 200px);
      height: 80px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 34px auto 22px;
      background: linear-gradient(95.46deg, #484848, #070708) ;
    border-radius:36px;
    text-shadow: 1px 2px 5px #262626;
    box-shadow: 1px 2px 5px #000000;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btns {
      width: 480px;
      height: 80px;
      font-size: 32px;
      font-family: $t-mf;
      font-weight: 600;
      color: #ffffff;
      line-height: 80px;
      margin: 54px auto;
      background: linear-gradient(
        90deg,
        #f83afd 0%,
        #c333ff 31%,
        #a84bff 49%,
        #724eff 79%,
        #495afa 100%
      );
      box-shadow: 0px 4px 16px 4px rgba(207, 182, 247, 1);
      // border-radius: 40px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nbtn {
      width: 100%;
      height: 80px;
      box-shadow: 0px 4px 16px 4px rgba(227, 211, 253, 1);
      // border-radius: 40px;
      border: 2px solid rgba(115, 40, 236, 0.5);
      font-size: 32px;
      font-family: $t-f;
      margin: 54px 20px;
      font-weight: 600;
      color: #b4184c;
      line-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .lang {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50px auto;
      img {
        height: 50px;
        width: 50px;
      }
      span {
        font-size: 28px;
        font-family: $t-mf;
        font-weight: 400;
        @include font_color("font_color1");
        line-height: 40px;
      }
    }
  }

  .flexbottom {
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 160px;
    background: linear-gradient(18deg, #ffdf2d, #00e2be);
    z-index: 99;
    // border-radius: 50% 50% 0 0;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .txt {
      font-size: 28px;
      font-weight: 600;
      font-family: $t-f;
      line-height: 42px;
    }
  }
  .infos {
    font-size: 28px;
    font-weight: 600;
    font-family: $t-mf;
    text-align: justify;
    background: #000000;
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    .video {
      width: 100%;
      height: 100vh;
    }
  }
}
</style>
